import { WeaBrowser, WeaLocaleProvider, WeaTree, WeaTableEditable } from 'ecCom';
import { Button } from 'antd';
import { observer } from 'mobx-react';
import * as React from 'react';
import { toJS } from 'mobx';
import Dialog from '.';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class AddSelectTree extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            expandedKeys: [],
        }
    }
    render() {
        const { store } = this.props;
        return (

            <Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@ffampe`} dialog={store}>
                <div class="ant-row wea-table-editable-title">
                    <span class="wea-table-editable-btns">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3u8jx2`} title={getLabel('506103','添加')} onClick={store.showBrowserModal} class="ant-btn ant-btn-primary ant-btn-sm">
                            <i className="icon-coms-Add-to-hot" style={{ color: "#57c5ff" }} /></Button>
                    </span></div>
                <WeaTree ecId={`${this && this.props && this.props.ecId || ''}_WeaTree@lmx6c5`}
                    datas={toJS(store.datas)}
                    expandedKeys={this.state.expandedKeys}
                    used={store.used}
                    draggable
                    onDragEnter={this.beforeDrop}
                    onDrag={this.onDrag}
                    onExpand={(expandedKeys, datas) => this.setState({ expandedKeys })}
                    onDelete={store.ondelete}
                />
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@tk9das`}
                    hasAdvanceSerach={true}
                    ref={(ref) => store.browserInstance = ref}
                    inputStyle={{ display: 'none' }}
                    onChange={store.changeValue}
                    dataParams={store.dataParams}
                    destDataParams={store.dataParams}
                    replaceDatas={store.browserDatas.slice()}
                    memorise={true}
                    type={store.browserType}
                    title={store.browserTitile}
                    iconBgcolor={"#217346"}
                    isSingle={false}
                    {...store.tabs}
                />
            </Dialog>
        )
    }

    beforeDrop = () => {
        const { store } = this.props;
        if (!store.draging) {
            store.draging = true;
            store.beforeDrag = store.datas;
        }

    }

    onDrag = (dragNode, targetNode, datas) => {
        const { store } = this.props;
        store.draging = false;
        console.log(dragNode, targetNode, datas);
        if (dragNode.parentSuf == targetNode.parentSuf) {
            if (dragNode.parentSuf == "" || dragNode.parentPre == targetNode.parentPre) {
                store.setDragData(datas);
                return;
            }
        }
        store.datas = store.datas.map(d=>({...d,__index: _.uniqueId()}));

    }
}